<!-- 下方数据表格 -->
<nz-table #editRowTable [nzData]="tableData" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzTotal]="total"
  [nzPageSize]="pageSize" [(nzPageIndex)]="page" (nzQueryParams)="onQueryParamsChange($event)">
  <!-- 表头 -->
  <thead>
    <tr>
      <th>sort</th>
      <th>scenario</th>
      <th>description</th>
      <th nzWidth="20%">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of editRowTable.data; let i = index;">
      <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
        <td>{{i+1}}</td>
        <td>{{data.scenario}}</td>
        <td>{{data.description}}</td>
        <td>
          <a (click)="startEdit(data.id)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a nz-popconfirm nzPopconfirmTitle="你确定删除当前Scenario吗?" (nzOnConfirm)="handleDelete(data.id)">删除</a>
          <nz-divider nzType="vertical"></nz-divider>
          <!-- <a target="_blank" [routerLink]="['/case']" [queryParams]="{id:data.id}">查看测试步骤</a> -->
          <app-cases [scenarioId]="data.id"></app-cases>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="handleCopy(data)">复制</a>
        </td>
      </ng-container>
      <!-- 编辑状态 -->
      <ng-template #editTemplate>
        <td>
          {{editCache[data.id].data.sort}}
        </td>
        <td>
          <input style="width: 300px;" type="text" nz-input [(ngModel)]="editCache[data.id].data.scenario" />
        </td>
        <td>
          <input style="width: 300px;" type="text" nz-input [(ngModel)]="editCache[data.id].data.description" />
        </td>
        <td>
          <a (click)="cancelEdit(data.id)">取消</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="saveEdit(data)" class="save">保存</a>
        </td>
      </ng-template>
    </tr>
  </tbody>
</nz-table>